<template>
  <div class="box" ref="echartDom"></div>
</template>

<script setup lang="ts">
import { inject, ref, reactive, shallowRef, onMounted, onUnmounted, watchEffect, defineEmits } from "vue";
import { pxToRem } from "@/utils/index";
import { start } from "repl";
import { Bottom } from "@element-plus/icons-vue/dist/types";
import { color } from "echarts";
import { he } from "element-plus/es/locale";

// 接收参数
const props = defineProps({
  housingSupplyStatsData: {
    type: Object,
    default: () => { },
  },
});
// 数据定义
const chartsData = reactive<any>({
  legendData: [],
  xAxisData: [],
  yAxisData: [],
  seriesData: [],
});
const echartDom = ref<null | HTMLDivElement>(null);
const myChart = shallowRef<null | any>(null);
const echarts = inject<any>("echarts");
const emit = defineEmits(['dialogData'])
// echarts初始化渲染
chartsData.legendData = props.housingSupplyStatsData.legendData;
chartsData.xAxisData = props.housingSupplyStatsData.xAxisData;
chartsData.yAxisData = props.housingSupplyStatsData.yAxisData;
chartsData.seriesData = props.housingSupplyStatsData.seriesData;
let colors = props.housingSupplyStatsData.colors;
let typeData = props.housingSupplyStatsData.typeData;
let legendSty = props.housingSupplyStatsData.legendStyle;
let gridSty = props.housingSupplyStatsData.gridConfig;

const getEchart = () => {
  if (echartDom.value && props.housingSupplyStatsData.legendStyle) {
    myChart.value = echarts.init(echartDom.value);
    // 提示框文字样式
    const tooltipTextStyle = {
      color: "#fff",
      fontSize: pxToRem(14),
    };

    // 提示框背景
    const tooltipBackgroundColor = "rgba(47, 99, 205, 0.5)";
    // 图例配置
    const legendStyle = {
      show: legendSty.show,
      icon: legendSty.icon,
      left:'center',
      right: pxToRem(legendSty.right),
      top: typeof legendSty.top == "number" ? pxToRem(legendSty.top) : legendSty.top,
      bottom: pxToRem(legendSty.bottom),
      itemWidth: pxToRem(legendSty.itemWidth),
      itemHeight: pxToRem(legendSty.itemHeight),
      itemGap: pxToRem(legendSty.itemGap),
      textStyle: {
        color: "#fff",
        fontSize: pxToRem(14),
        rich: {},
        padding: [0, 0, pxToRem(-3), 0],
      },
      data: chartsData.legendData,
    };

    // 网格区域
    const gridConfig = {
      left: pxToRem(gridSty.left),
      right: pxToRem(gridSty.right),
      bottom: pxToRem(gridSty.bottom),
      top: pxToRem(gridSty.top),
      containLabel: true,
    };

    // x轴配置
    const xAxisConfig = {
      boundaryGap: true,
      offset: pxToRem(5),
      axisLine: {
        show: true,
        lineStyle: {
          // color: 'rgba(40, 252, 255, 1)'
        }
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          color: "#FFFFFF",
          fontSize: pxToRem(12),
        },
      },
      data: chartsData.xAxisData,
    };
    // y轴配置
    const yAxisConfig = chartsData.yAxisData.map((item: any,index:any) => ({
      type: "value",
      name: item.name,
      nameTextStyle: {
        color: "#959699",
        fontSize: pxToRem(14),
        padding: [0, 0, 0, 0],
        align: index == 0?'left':'right',
      },
      splitLine: {
        show: item.type == 2 ? false: true,
        lineStyle: {
          color: "#31679C",
          type: "dashed",
        },
      },
      axisLabel: {
        formatter: "{value}",
        fontSize: pxToRem(12),
      },
    }));
    // 数据项配置
    const seriesConfig = chartsData.seriesData.map((data: any, index: string | number) => ({
      name: chartsData.legendData[index],
      type: typeData[index].name,
      barWidth: '20%', // 设置为类目宽度的50%
      data: data,
      symbol: "none",
      smooth: false,
      stack: typeData[index].stack == '2' ? "account" :  typeData[index].stack == '3' ? "stack":'',
      yAxisIndex: typeData[index].type == 2 ? 1 : 0, 
      areaStyle:
        typeData[index].areaStyleType == 2
          ? {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: colors[index].a, // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: colors[index].b, // 100% 处的颜色
                },
              ],
            },
          }
          : null,
      itemStyle: {
        color: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          type: "linear",
          global: false,
          colorStops: [
            {
              offset: 0,
              color: colors[index].a,
            },
            {
              offset: 1,
              color: colors[index].b,
            },
          ],
        },
      },
    }));
    // 渲染图表数据
    const option = {
      tooltip: {
        trigger: 'axis',
        formatter: (val) => {
          let doms = ''
          val.forEach((x, i) => {
            doms += `${x.marker + x.seriesName}：${x.value}${chartsData.yAxisData[0].name.substring(3, 5)}` + '<br>'
          })
          return (
            `${val[0].name}` + '<br>' + doms
          )
        }
      },
      legend: legendStyle,
      grid: gridConfig,
      xAxis: xAxisConfig,
      yAxis: yAxisConfig,
      dataZoom: [{
        show: seriesConfig[0].type == 'line' ? 'true' : false,
        type: "slider",
        left: pxToRem(35),
        right: pxToRem(20),
        bottom: pxToRem(15),
        startValue: 0,
        height:pxToRem(20),
        endValue: 999
      }],
      series: seriesConfig,
    };
    myChart.value.setOption(option);
    myChart.value.getZr().on("click", (params) => {
      emit('dialogData', option)
    });
  }
};
const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  chartsData.legendData = props.housingSupplyStatsData.legendData;
  chartsData.xAxisData = props.housingSupplyStatsData.xAxisData;
  chartsData.yAxisData = props.housingSupplyStatsData.yAxisData;
  chartsData.seriesData = props.housingSupplyStatsData.seriesData;
  colors = props.housingSupplyStatsData.colors;
  typeData = props.housingSupplyStatsData.typeData;
  legendSty = props.housingSupplyStatsData.legendStyle;
  gridSty = props.housingSupplyStatsData.gridConfig;
  getEchart();
};

watchEffect(() => {
  updateChart();
});

onMounted(() => {
  getEchart();
  window.addEventListener("resize", updateChart);
});

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
});
</script>
